<template>
	<!-- <diy ref="diy" v-if="isDiy && loading"></diy> -->
	<!-- <visualization ref='vis' v-else-if="!isDiy && loading"></visualization> -->
	<view class="index">
		<view class="navbar">
			<view class="sys-bar" :style="{height:sysHeight}"></view>
			<view class="navbarh acea-row row-middle">
				<view class="">
					<image class="logo" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/logo.png" mode="aspectFit"></image>
				</view>
				<view class="">
					<image class="logo-title" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/logo-title.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
		<view class="money-nav">
			<view class="acea-row row-between-wrapper">
				<view>
					<view class="acea-row row-middle">
						<view>余额（元）</view>
						<view class="iconfont icon-yanjing"></view>
						<!-- <view class="iconfont icon-yanjing-biyan"></view> -->
					</view>
					<view class="money">{{ userdata.yue || '******' }}</view>
				</view>
				<!--  -->
				<view class="acea-row row-middle" v-if="userdata.yue">
					<text class="iconfont icon-dian"></text>
					<text>正常缴存</text>
				</view>
				<view class="login-btn" @click="login" v-else>点击登录</view>
			</view>
			<view class="acea-row ">
				<view class="" style="margin-top: 30rpx;" @click.stop="billclick(1)">
					<view>最近存缴（元）</view>
					<view class="acea-row row-between-wrapper">
						<view class="num">{{ userdata.cunData.number || '******' }}</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
					<view style="margin-top: 10rpx;font-size: 25rpx;" v-if="userdata.cunData.number">{{ userdata.cunData.add_time || '无' }} 缴存</view>
					<view style="font-size: 50rpx;letter-spacing: 4rpx;" v-else>---</view>
				</view>
				<view class="" style="margin-top: 30rpx;margin-left: 100rpx;" @click.stop="billclick(2)">
					<view>最近提取（元）</view>
					<view class="acea-row row-between-wrapper">
						<view class="num">{{ userdata.quData.number || '******' }}</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
					<view style="margin-top: 10rpx;font-size: 25rpx;" v-if="userdata.quData.number">{{ userdata.quData.add_time || '无' }} 提取</view>
					<view style="font-size: 50rpx;letter-spacing: 4rpx;" v-else>---</view>
				</view>
			</view>
		</view>
		
		<view class="acea-row row-middle px-30" style="margin-top: 50rpx;">
			<view class="line"></view>
			<view class="title">热门服务</view>
		</view>
		<view class="px-30 acea-row row-around" style="margin-top: 30rpx;">
			<view class="acea-row row-middle row-column" @click="pathclick(`/pages/index/account`)">
				<view class="icon">
					<image src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/zhanghu.png"></image>
				</view>
				<view class="text">账户信息</view>
			</view>
			<view class="acea-row row-middle row-column" @click="Tipsclick(`暂时无法获取你的贷款信息`)">
				<view class="icon">
					<image src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/daikuan.png"></image>
				</view>
				<view class="text">贷款信息</view>
			</view>
			<view class="acea-row row-middle row-column" @click="Tipsclick(`暂时无法获取你的个税抵扣填报信息`)">
				<view class="icon">
					<image src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/geshui.png"></image>
				</view>
				<view class="text">
					<view>个税抵扣</view>
					 <view>填报信息</view>
				</view>
			</view>
			<view class="acea-row row-middle row-column" @click="pathclick(`/pages/other/transfer`)">
				<view class="icon">
					<image src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/zhuanyi.png"></image>
				</view>
				<view class="text">转移接续</view>
			</view>
		</view>
		
		<view class="acea-row row-between px-30" style="margin-top: 50rpx;">
			<view class="acea-row row-middle">
				<view class="line"></view>
				<view class="title">城市服务</view>
			</view>
			<view class="acea-row row-middle more" @click="pathclick(`/pages/other/address`)">
				<view>查看更多</view>
				<view style="margin-left: 10rpx;font-size: 24rpx;">>></view>
			</view>
		</view>
		
		<view class="center acea-row row-between-wrapper" @click="webClick(userdata.zongxin_name_wap_url,userdata.zongxin_name)">
			<view class="acea-row row-middle">
				<view class="centerindex">
					<image src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/chengshi.png"></image>
				</view>
				<view class="center-title">{{userdata.zongxin_name}}</view>
			</view>
			<view>
				<image class="index-right" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/index-right.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- <view class="center acea-row row-between-wrapper" v-else>
			<view class="acea-row row-middle">
				<view class="centerindex">
					<image src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/chengshi.png"></image>
				</view>
				<view class="center-title">无证明记录</view>
			</view>
			<view>
				<image class="index-right" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/index-right.png" mode="aspectFit"></image>
			</view>
		</view> -->
		
		<view class="banner">
			<image class="imgwh" src="https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/banner01.png" mode=""></image>
		</view>
		
		<view class="bottom" style="margin-top: 50rpx;">
			<view>该信息来源于{{ userdata.zongxin_name }}</view>
			<view>中心电话：0771-12329</view>
		</view>
		
		<view style="width: 100%;height:200rpx;"></view>
		
		<tabbar :current="'0'"></tabbar>
		
		<!-- <pageFoot></pageFoot> -->
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import pageFoot from '@/components/pageFooter/index.vue';
	import tabbar from '@/components/pageFooter/tabbar.vue';
	import diy from './diy'
	import visualization from './visualization'
	import Cache from '@/utils/cache';
	import {
		getShare,
		getVersion
	} from "@/api/public.js";
	import{
		userData
	} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex"
	let app = getApp();
	export default {
		components:{
			pageFoot,
			tabbar,
			diy,
			visualization
		},
		data() {
			return {
				isDiy: uni.getStorageSync('is_diy'),
				shareInfo: {},
				loading: false,
				sysHeight: sysHeight,
				userdata: [],
				
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			// uni.hideTabBar()
			uni.$on('is_diy', (data) => {
				this.isDiy = data
			})
			this.setOpenShare();
		},
		onShow() {
			console.log('isLogin',this.isLogin);
			uni.hideTabBar();
			this.getdata();
			this.getVersion(0);
		},
		onHide() {
			// this.isDiy = -1
		},
		methods: {
			webClick(url,name){
				if( !url ) return this.$util.Tips({ title : '无证明记录' })
				if( name=='南宁住房公积金管理中心区直分中心' ){
					app.globalData.pdfurl = url;
					uni.navigateTo({
						url: `/pages/other/pdf`
					})
				}
				if( name=='南宁市住房公积金管理中心' ){
					app.globalData.locationurl = 'https://gjj.nanning.rongyide.vip/gzpt-basis-print-web/static/plugins/pdfjs/web/viewer.html?file='+url;
					uni.navigateTo({
						url: `/pages/other/web-view`
					})
					// uni.downloadFile({
					//   url: url,
					//   success: function (res) {
					//     var filePath = res.tempFilePath;
					//     uni.openDocument({
					//       filePath: filePath,
					//       showMenu: true,
					//       success: function (res) {
					//         console.log('打开文档成功');
					//       }
					//     });
					//   }
					// });
					// uni.navigateTo({
					// 	url: `/pages/other/web-view?url=${url}`
					// })
				}
			},
			Tipsclick(title){
				this.$util.Tips({ title : title })
			},
			login(){
				uni.navigateTo({
					url: '/pages/other/login'
				})
			},
			getdata(){
				userData().then(res=>{
					this.userdata = res.data.userData;
				})
			},
			billclick(val){
				uni.navigateTo({
					url:'/pages/index/account-bill?type=' + val
				})
			},
			pathclick(url){
				uni.navigateTo({
					url: url
				})
			},
			getVersion(name) {
				uni.$emit('uploadFooter')
				getVersion(name).then(res => {
					this.version = res.data.version
					this.isDiy = res.data.is_diy
					this.loading = true
					uni.setStorageSync('is_diy', res.data.is_diy)
					if (!uni.getStorageSync('DIY_VERSION') || res.data.version != uni.getStorageSync(
							'DIY_VERSION')) {
						if (uni.getStorageSync('DIY_VERSION')) {
							uni.setStorageSync('DIY_VERSION', res.data.version)
							if (this.isDiy) {
								this.$refs.diy.reconnect()
							} else {
								this.$refs.vis.reconnect()
							}
						}
						uni.setStorageSync('DIY_VERSION', res.data.version)
					} else {}
				}).catch(err => {
					this.loading = true
				})
			},
			// 微信分享；
			setOpenShare: function() {
				let that = this;
				getShare().then((res) => {
					let data = res.data;
					this.shareInfo = data;
					// #ifdef H5
					let url = location.href;
					if (this.$store.state.app.uid) {
						url =
							url.indexOf("?") === -1 ?
							url + "?spread=" + this.$store.state.app.uid :
							url + "&spread=" + this.$store.state.app.uid;
					}
					if (that.$wechat.isWeixin()) {
						let configAppMessage = {
							desc: data.synopsis,
							title: data.title,
							link: url,
							imgUrl: data.img,
						};
						that.$wechat.wechatEvevt(
							["updateAppMessageShareData", "updateTimelineShareData"],
							configAppMessage
						);
					}
					// #endif
				});
			},
		},
		onReachBottom: function() {
			// if (this.isDiy) {
			// 	this.$refs.diy.onsollBotton()
			// }
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {
				title: this.shareInfo.title,
				path: "/pages/index/index?spid=" + this.$store.state.app.uid || 0,
				imageUrl: this.shareInfo.img,
			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: this.shareInfo.title,
				query: {
					spid: this.$store.state.app.uid || 0
				},
				imageUrl: this.shareInfo.img,
			};
		},
		// #endif
	}
</script>

<style lang="scss" >
	page{ background-color: #ffffff !important; }
	.index{
		
		.login-btn{
			width: 200rpx;
			height: 70rpx;
			text-align: center;
			line-height:70rpx;
			color: #ffffff;
			background-color: #1A4CCF;
			font-size: 26rpx;
			border-radius: 50rpx;
		}
		
		.px-30{
			padding: 0 30rpx;
		}
		
		.navbar{
			width: 100%;
			background-color: #ffffff;
			
			.navbarh{
				width: 100%;
				height: 120rpx;
				padding: 0 30rpx;
				
				.logo{
					width: 145rpx;
					height: 90rpx;
					
					// image{
					// 	width: 100%;
					// 	height: 100%;
					// }
				}
				
				.logo-title{
					width: 350rpx;
					height: 120rpx;
					
					// image{
					// 	width: 100%;
					// 	height: 100%;
					// }
				}
				
			}
		}
		
		.money-nav{
			width: 690rpx;
			height: 380rpx;
			border-radius: 15rpx;
			overflow: hidden;
			margin: 30rpx auto;
			// background-color: #6587E8;
			background-image: url('https://zhufanggongjijin.oss-cn-hangzhou.aliyuncs.com/index-bg.png');
			background-size: 100% 100%;
			padding: 30rpx;
			color: #ffffff;
			
			.money{
				font-size: 55rpx;
				margin-top: 20rpx;
			}
			
			.icon-yanjing{
				font-size: 40rpx;
				margin-left: 60rpx;
				margin-top: 10rpx;
			}
			
			.icon-yanjing-biyan{
				font-size: 40rpx;
				margin-left: 60rpx;
				margin-top: 10rpx;
			}
			
			.icon-dian{
				color: #ADFCA6;
				font-size: 60rpx;
			}
			
			.num{
				font-size: 34rpx;
				margin-top: 20rpx;
				width: 220rpx;
			}
			
			.icon-xiangyou{
				font-size: 30rpx;
				margin-top: 16rpx;
			}
		}
		
		.line{
			width: 8rpx;
			height: 30rpx;
			background-color: #6587E8;
			margin-right: 15rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: bold;
		}
		.icon{
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		.text{
			font-size: 28rpx;
			margin-top: 10rpx;
		}
		.more{
			color: #3B61D7;
			font-size: 28rpx;
		}
		.center{
			width: 690rpx;
			height: 150rpx;
			background-color: #F6F9FC;
			margin: 50rpx auto;
			padding: 30rpx;
		}
		.icon-anniu-jiantouxiangyou_o{
			color: #3B61D7;
			font-size: 50rpx;
		}
		.centerindex{
			width: 80rpx;
			height: 80rpx;
			// background-color: #3B61D7;
			margin-left: 30rpx;
			
			image{
				width: 100%;
				height: 100%;
			}
		}
		.center-title{
			font-size: 26rpx;
			color: #3D63D8;
			margin-left: 35rpx;
			width: 420rpx;
		}
		.index-right{
			width: 40rpx;
			height: 40rpx;
		}
		.banner{
			width: 690rpx;
			height: 200rpx;
			margin: 30rpx auto;
			// background-color: #6587E8;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.bottom{
			color: #797979;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
		}
	}
</style>
